<template>
    <el-dialog custom-class="form-dialog" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="800px" v-loading="loading"
        :before-close="handleClose">
        <!-- 表单内容 -->
        <div class="form-dialog-content-box">
            <el-form :model="form" label-width="80px" :rules="rules" ref="ruleForm" :size="size">
                <el-form-item label="名称：" prop="name">
                    <el-input v-model="form.name" :size="size"></el-input>
                </el-form-item>
                <el-form-item label="图标：" prop="icon">
                    <el-input v-model="form.icon" :size="size"></el-input>
                </el-form-item>

                <el-form-item label="父级：" prop="pid">
                    <el-select v-model="form.pid" placeholder="请选择">
                        <el-option label="无" :value="0"></el-option>
                        <el-option v-for="item in menuGroupList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="排序：" prop="sort">
                    <el-input v-model.number="form.sort" :size="size" type="number"></el-input>
                </el-form-item>

                <el-form-item label="颜色：" prop="color">
                    <el-color-picker v-model="form.color" :size="size"></el-color-picker>
                </el-form-item>
                <el-form-item label="状态：" prop="status">
                    <el-switch v-model.number="form.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>

                <el-form-item label="路径：" prop="path" style="width: 100%;">
                    <el-input v-model="form.path" :size="size"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="remarks" style="width: 100%;">
                    <el-input v-model="form.remarks" :size="size" type="textarea" :rows="3"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <!-- 提交区域 -->
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancelBtn" :size="size">取 消</el-button>
            <el-button type="primary" @click="handleSubmitBtn" :size="size">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
//引入混入逻辑
import mixin from '@/mixins/form'
export default {
    name: "formDialog",
    mixins: [mixin],
    props: {
        title: {
            type: String,
            default: "新增"
        },
        menuGroupList: {
            type: Array,
            default: function(){
                return []
            }
        }
    },
    data() {
        return {
            form: {
                id: "",
                name: "",//名称
                path: "",//路径
                remarks: "",//备注
                icon: "",//图标
                color: "",//颜色
                pid: 0,//父级
                sort: 0,//排序
                status: 1,//是否展示菜单
            },//表单数据

            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                path: [
                    { required: true, message: '请输入路径', trigger: 'blur' },
                ],
            },//表单验证规则
        }
    },
    methods: {
    }
}
</script>

<style scoped lang="scss">
.form-dialog-content-box {
    ::v-deep .el-form{
        display: flex;
        flex-wrap: wrap;
        .el-form-item{
            width: 50%;
            .el-select{
                display: block;
            }
            .el-cascader{
                display: block;
            }
        }
    }
}
</style>